<template>
    <div class="main-container" id="content">
        <div class="main-content">
            <div class="top-content">
                <div class="top-name">编辑巡检</div>
                <el-button class="pad-back" @click="back()">返回</el-button>
            </div>
            <div class="bottom-content">
                <div style="margin: 3rem; width: 93%;">
                    <el-form :model="ruleForm" :rules="rules" ref="formName" label-width="120px" class="demo-ruleForm"
                        :class="{ 'form-rules-show': seeType }">
                        <!-- <el-row style="margin-bottom: 3rem;">
                            <el-col :span="12">
                                <el-form-item label="公司名称：" prop="baseId">
                                    <el-select v-model="ruleForm.baseId" placeholder="请选择公司名称" clearable
                                        @change="baseChange">
                                        <el-option v-for="item in baseArray" :key="item.id" :label="item.name"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="基地名称：" prop="baseId">
                                    <el-select v-model="ruleForm.baseId" placeholder="请选择基地名称" clearable
                                        @change="baseChange">
                                        <el-option v-for="item in baseArray" :key="item.id" :label="item.name"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row> -->
                        <!-- <el-row style="margin-bottom: 3rem;">
                            <el-col :span="24">
                                <el-form-item label="鱼池名称：" prop="fishpondId">
                                    <el-select v-model="ruleForm.fishpondId" placeholder="请选择鱼池名称" clearable>
                                        <el-option v-for="item in fishpondArray" :key="item.id" :label="item.name" :value="item.id
                                        "></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row> -->
                        <el-row style="margin-bottom: 3rem;">
                            <el-col :span="24">
                                <el-form-item label="发送内容：" prop="content">
                                    <el-input type="textarea" v-model="ruleForm.dealContent" placeholder="请输入发送内容" clearable
                                        :rows="5" show-word-limit></el-input>
                                </el-form-item>
                            </el-col>

                        </el-row>

                        <el-row style="margin-bottom: 3rem;">
                            <el-col :span="24">
                                <el-form-item label="发送图片：" prop="images">
                                    <MultipleImgUpload style="height: 100px;width: 100px; display: flex;" sirProps="image"
                                        :sirUrl="ruleForm.imagesArr" :limit="6" @upSuccess="upSuccess" :disabled="seeType">
                                    </MultipleImgUpload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <div>

                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="back()">取 消</el-button>
                        <el-button class="btn-light-blue" @click="submitForm('formName')">确 定</el-button>
                    </div>
                </div>

            </div>
        </div>


    </div>
</template>
<script>
import MultipleImgUpload from "@/components/MultipleImgUpload.vue";
import { getXcxRenovateTaskResult, saveXcxTaskResult, getBoxFishponds } from "@/api/home";
import { getCompanyInfoTree } from "@/api/company";
import { getSysCompanyBases, getSysFishTypes } from "@/api/system";

export default {
    components: {
        MultipleImgUpload
    },
    props: {
        addEditId: {
            type: String,
            default: "",
        },
        addEditStatus: {
            type: String,
            default: "add",
        },
        addEditIsDialog: {
            type: Boolean,
            default: false,
        },

    },
    data() {
        return {
            fishpondArray: [],
            imagesArr: [],
            ruleForm: {
                // 表单字段
                id: "",
                companyId: "",
                dealUserId: '1'

            },
            rules: {

            },
            addEditIsDialog_c: false, // 弹窗是否显示
            seeType: false, // 是否禁用
            baseArray: [], // 基地集合
            companyArray: [], // 公司集合
            fishTypeArray: [], // 鱼类集合
            userType: "", // 用户类型（0超级管理员，1公司管理员）
            fishSex: [
                {
                    value: 0,
                    label: '未鉴定'
                },
                {
                    value: 1,
                    label: '雄'
                },
                {
                    value: 2,
                    label: '雌'
                }
            ]
        };
    },
    watch: {
        addEditIsDialog(val) {
            this.addEditIsDialog_c = val;
            if (this.addEditIsDialog_c) {
                // 添加
                if (this.addEditStatus == "add") {
                    this.ruleForm.id = this.addEditId;
                    console.log(this.ruleForm);

                    this.seeType = false;

                }

                // 编辑
                if (this.addEditStatus == "edit") {
                    this.ruleForm.id = this.addEditId;
                    this.seeType = false;
                    this.getDetail();
                }

                // 查看
                if (this.addEditStatus == "see") {
                    this.ruleForm.id = this.addEditId;
                    this.seeType = true;
                    this.getDetail();
                }

                this.userType = Number(window.localStorage.getItem("userType"));

                // 获取公司列表
                this.getCompanyInfoTree();

                this.getSysCompanyBases();
            }
        },
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        // 返回
        back() {
            this.$router.go(-1);
        },
        // 上传图片
        upSuccess(data) {
            this.ruleForm.imagesArr = data;
        },

        // 详情
        getDetail() {
            console.log(this.$route.query.id);
            getXcxRenovateTaskResult({ id: this.$route.query.id }).then((res) => {
                if (res.code == 200) {
                    res.data.imagesArr =
                        res.data.dealImages != undefined ? res.data.dealImages.split(",") : [];
                    this.ruleForm = res.data;

                    // 获取公司列表
                    this.getCompanyInfoTree();

                    this.getSysCompanyBases();
                    // this.getBoxFishponds();
                    // this.getObjFishTypes();
                }
            });
        },

        // 提交
        submitForm(formName) {

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.ruleForm.dealImages = this.ruleForm.imagesArr.toString();
                    console.log(this.ruleForm);
                    // const params = new URLSearchParams();
                    // params.append('baseId', this.ruleForm.baseId)
                    // params.append('companyId', this.ruleForm.companyId)
                    // params.append('content', this.ruleForm.content)
                    // params.append('dealUserId', this.ruleForm.dealUserId)
                    // params.append('fishpondId', this.ruleForm.fishpondId)
                    // params.append('images', this.ruleForm.images)
                    const params = {
                        dealContent: this.ruleForm.dealContent,
                        taskId: Number(this.$route.query.id),
                        taskType: 1,
                        dealImages: this.ruleForm.dealImages,
                        id:this.ruleForm.id
                    }
                    saveXcxTaskResult(params).then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: res.msg,
                            });
                            this.$router.back(-1)
                            // 刷新列表
                            // this.$parent.onSubmit();
                        }
                    });
                }
            });
        },
        // 基地下拉切换
        baseChange() {
            // 获取鱼池列表
            this.getBoxFishponds();
        },
        // 获取鱼池列表
        getBoxFishponds() {
            // if (
            //   this.searchForm.boxId === "" ||
            //   this.searchForm.boxId == null
            // ) {
            //   return;
            // }
            // console.log(this.ruleForm);
            // let a = {
            //     baseId: this.$route.query.baseId,
            //     companyId: this.$route.query.companyId,
            // }
            // getBoxFishponds(a).then((res) => {
            //     if (res.code == 200) {
            //         this.fishpondArray = res.data;
            //     }
            // });
        },
        // 取消
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.$parent.closeAddEdit();
            this.ruleForm.imagesArr = []
        },
        // 获取公司列表
        getCompanyInfoTree() {
            if (this.ruleForm.userType === "") {
                return;
            }

            if (this.ruleForm.userType == 0) {
                // 超级管理员，公司只有一个总公司
                this.companyArray = [
                    {
                        id: 0,
                        name: "总公司",
                        parentId: 0,
                    },
                ];
            } else {
                getCompanyInfoTree({}).then((res) => {
                    if (res.code == 200) {
                        this.companyArray = res.data;
                    }
                });
            }
        },
        // 公司下拉切换
        changeTreeItem(val) {
            if (val) {
                this.ruleForm.companyId = val[val.length - 1];
            } else {
                this.ruleForm.companyId = "";
            }

            // this.ruleForm.baseId = "";
            // this.baseArray = [];
            // console.log(val);
            // this.getObjFishTypes(val)
            // 获取基地列表
            this.getSysCompanyBases();
        },
        // 获取基地列表
        getSysCompanyBases() {
            if (this.ruleForm.companyId === "" || this.ruleForm.companyId == null) {
                return;
            }

            getSysCompanyBases({ id: this.ruleForm.companyId }).then((res) => {
                if (res.code == 200) {
                    this.baseArray = res.data;
                }
            });
        },
        // getObjFishTypes() {

        //   getObjFishTypes({ id: this.ruleForm.companyId }).then((res) => {
        //     if (res.code == 200) {
        //       this.fishTypeArray = res.data;

        //     }
        //   });
        // },
    },
};
</script>
<style lang="less" scoped>
/deep/.el-form-item__label {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 4.5rem;
}

/deep/.el-textarea__inner {
    // height: 5rem;
    width: 70rem;
}

.dialog-footer {
    // margin-left: 70rem;
    margin-top: 15rem;
    margin-right: 5rem;

    /deep/.el-button {
        height: 4rem;
        width: 10rem;
        margin-right: 2rem;

        span {
            font-size: 2rem;
        }
    }
}



/deep/.el-input__inner {
    height: 5rem;
    width: 70rem;
}


/deep/.el-select {
    width: 60% !important;
}

.bottom-content {
    width: 97%;
    // min-height: 30rem;
    // display: flex;
    // justify-content: Fcenter;
    height: 70rem;
    background: #ffffff;
    border-radius: 0.43rem;
    overflow: scroll;

    .bottom-box {
        width: 95%;
        height: 30rem;
        background-color: #f4f8f9;
        margin: 3rem;
        border-radius: 30px;
        font-size: 2rem;
        font-weight: bold;
    }
}


/*滚动条整体样式*/
::-webkit-scrollbar {
    width: 0.59rem;
    // height: 8.93rem;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    // background: #d9d9d9;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
    border-radius: 10px;
    // background: #ededed;
}

* {
    box-sizing: content-box;
}

.main-container {
    background-color: #045cad;
    padding: 1rem 0 1.5rem 0;

    .main-content {
        min-height: calc(100vh - 90px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .top-content {
            width: 97%;
            height: 5rem;
            // margin-top: 1rem;
            margin-bottom: 0.5rem;
            color: #ffffff;
            display: flex;
            justify-content: center;
            font-family: "宋体";
            position: relative;
            // border: 1px solid red;
            position: relative;

            .top-name {
                font-size: 2.59rem;
                font-weight: 900;
            }

            .el-icon-full-screen {
                line-height: 3rem;
                margin-left: 5rem;
            }
        }


    }
}

// 调整button的宽高
.my-el-search {
    .el-button {
        // margin-left: 4rem;
        text-align: center;
        width: 10rem;
        height: 2.6rem;
        font-size: 2rem;
    }
}

// 调整select的宽高
.my-el-select {
    margin-right: 5rem;

    /* selecte 框的高度设置，默认是 40px*/
    /deep/ .el-input__inner {
        height: 4.5rem;
        width: 25rem;
        font-size: 1.86rem;
        padding-left: 2rem;
    }

    /* 下面设置右侧按钮居中 */
    .el-input__suffix {
        top: 5px;
    }

    //    icon样式设置
    /deep/.el-input__icon {
        font-size: 0;
    }

    .el-input__suffix-inner {
        display: inline-block;
    }

    /deep/.el-date-editor .el-range-separator {
        margin: 0 1rem;
        line-height: 4.285714rem;
        font-size: 1.86rem;
        width: 10%;
    }

    /deep/.el-range-editor.el-input__inner {
        padding: 0;
    }

    /deep/.el-date-editor .el-range-input {
        width: 100%;
        font-size: 1.86rem;
    }

    ::v-deep .el-select-dropdown__item {
        font-size: 2.16rem;
        height: 4.428571rem;
        line-height: 4.428571rem;
    }

    ::v-deep.el-input--small .el-input__inner {
        height: 4rem;
        width: 10rem !important;
        font-size: 1.3rem;
        text-align: center;
        padding: 0;
    }
}
</style>
  